<template>
  <div class="main">
    <!-- 搜索 -->
    <div class="nav">
      <div class="nav_box">
        <router-link to="/home/index" class="router-link-active"
          >首页</router-link
        >
        <el-icon color="#999"><DArrowRight /></el-icon>
        <router-link to="/home/study" class="router-link-active"
          >学习矩阵</router-link
        >
      </div>
    </div>
    <el-container>
      <el-aside>
        <div class="title" style="cursor: pointer" @click="zkclick">
          <el-icon color="#e02020" class="ico_1"><Menu /></el-icon>
          <div class="tet">学习矩阵</div>
          <el-icon color="#e02020" class="ico_2" v-if="zk"><ArrowUp /></el-icon>
          <el-icon color="#e02020" class="ico_2" v-else><ArrowDown /></el-icon>
        </div>
        <div
          v-if="zk"
          :class="myitem == i ? 't_item' : 't_item1'"
          v-for="(item, i) in list"
          :key="i"
          style="cursor: pointer"
          @click="citem(i)"
        >
          <div class="tet">
            {{ item.name }}
          </div>
        </div>
      </el-aside>
      <el-main>
        <div class="con" v-if="total > 0">
          <div
            class="c_item"
            v-for="item in data"
            :key="item.id"
            style="cursor: pointer"
            @click="particulars(item.id)"
          >
            <div class="item_1" v-if="item.image != ''">
              <img :src="item.image" alt="" class="imgs" />
              <div class="wb">
                <div class="title">
                  {{ item.title }}
                </div>
                <div class="tet">
                  <!-- <div class="text" v-html="item.content"></div> -->
                  <div class="text">{{ removeHtmlTags(item.content) }}</div>
                </div>
                <div class="time">{{ item.create_time }}</div>
              </div>
            </div>
            <div class="item_2" v-else>
              <div class="title">{{ item.title }}</div>
              <div class="tet">
                <div class="text">{{ removeHtmlTags(item.content) }}</div>
              </div>
              <div class="time">{{ item.create_time }}</div>
            </div>
            <div class="br"></div>
          </div>
          <div class="con_bom" v-if="total > 0">
            <div class="cc">共{{ total }}条</div>
            <el-pagination
              v-model:page-size="pageSize"
              background
              layout="prev, pager, next"
              :total="total"
              @next-click="nextclick"
              @prev-click="prevclick"
              @change="change1"
            />
          </div>
          <div class="aa"></div>
        </div>
        <div class="rq" v-else>
          <img src="@/image/容器.svg" alt="" />
          <div>暂无信息</div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getmatrixApi, getmatrixApi1 } from '@/api/user'
import { useRouter } from 'vue-router'
let Router = useRouter()
function particulars(id: any) {
  // Router.push({ path: '/home/particulars', query: { id } })
  window.open(`/pc/home/particulars?id=${id}`, '_blank')
}
const removeHtmlTags = (html: any) => {
  // 使用innerHTML创建临时元素，然后提取textContent
  const tempElement = document.createElement('div')
  tempElement.innerHTML = html
  return tempElement.textContent || tempElement.innerText
}
let names = ref({
  cid: 1,
  keyword: '',
  page: 1,
  page_size: 7
})
const data = ref([
  {
    image: '',
    create_time: '2024-01-23',
    id: 9,
    title: '学习矩阵',
    content: ''
  }
])
const getnetwork = () => {
  getmatrixApi(names.value).then(res => {
    data.value = res.data.data.data
    total.value = res.data.data.total
    console.log('内容', data.value)
  })
}
getnetwork()
const total = ref(0)
const list = ref([
  { id: 1, name: '文章分类1' },
  { id: 1, name: '文章分类2' },
  { id: 1, name: '文章分类3' }
])
getmatrixApi1().then(res => {
  // console.log(res, '分类')
  // console.log('list', list.value)
  list.value = res.data.data
})

const myitem = ref(0)
const citem = (ev: number) => {
  names.value.page = 1
  names.value.cid = list.value[ev].id
  getnetwork()
  myitem.value = ev
  // console.log(ev, myitem.value)
}
// 分页
const pageSize = ref(7)
const nextclick = () => {
  names.value.page++
  getnetwork()
}
const prevclick = () => {
  names.value.page--
  getnetwork()
}
const change1 = (e: any) => {
  console.log(e)
  names.value.page = e
  getnetwork()
}
// 展开
const zk = ref(true)
const zkclick = () => {
  zk.value = !zk.value
}
</script>

<style lang="scss" scoped>
.rq {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 100px;
  img {
    width: 228px;
    height: 226px;
  }
}
.el-container {
  .el-main {
    position: relative;
    width: 816px;
    overflow: hidden;
    height: 1200px;
    background-color: #fff;
    .con {
      margin-top: -18px;
      margin-left: -16px;
      width: 800px;
      background-color: #fff;
      .c_item {
        .item_1 {
          display: flex;
          padding: 0 16px;
          height: 142px;
          // border-bottom: 1px solid #e5e5e5;
          .imgs {
            margin-top: 16px;
            margin-right: 16px;
            width: 160px;
            height: 110px;
            background-color: blue;
          }
          .wb {
            .title {
              margin: 17px 0 13px 0;
              font-size: 16px;
              font-weight: 600;
              color: #1a1a1a;
            }
            .tet {
              font-size: 12px;
              color: #999999;
              overflow: hidden; /* 隐藏溢出内容 */
              text-overflow: ellipsis; /* 当文本溢出时，使用省略号表示 */
              width: 601px; /* 定义容器宽度 */
              .text {
                font-size: 12px !important;
                display: -webkit-box; /* 启用弹性盒子布局 */
                -webkit-line-clamp: 2; /* 限制显示2行文本 */
                -webkit-box-orient: vertical; /* 垂直方向排列子元素 */
                overflow: hidden; /* 隐藏溢出内容 */
                text-overflow: ellipsis; /* 当文本溢出时，使用省略号表示 */
              }
            }
            .time {
              margin-top: 10px;
              font-size: 12px;
              font-weight: normal;
              text-align: right;
              color: #1a1a1a;
            }
          }
        }
        .item_2 {
          height: 130px;
          margin-left: 16px;
          .title {
            margin: 17px 0 13px 0;
            font-size: 16px;
            font-weight: 600;
            color: #1a1a1a;
          }
          .tet {
            font-size: 12px !important;
            color: #999999;
            overflow: hidden; /* 隐藏溢出内容 */
            text-overflow: ellipsis; /* 当文本溢出时，使用省略号表示 */
            width: 761px; /* 定义容器宽度 */
            .text {
              font-size: 12px !important;
              display: -webkit-box; /* 启用弹性盒子布局 */
              -webkit-line-clamp: 2; /* 限制显示2行文本 */
              -webkit-box-orient: vertical; /* 垂直方向排列子元素 */
              overflow: hidden; /* 隐藏溢出内容 */
              text-overflow: ellipsis; /* 当文本溢出时，使用省略号表示 */
            }
          }
          .time {
            margin-top: 10px;
            margin-right: 16px;
            font-size: 12px;
            font-weight: normal;
            text-align: right;
            color: #1a1a1a;
          }
        }
        .br {
          width: 768px;
          height: 1px;
          margin-left: 16px;
          border-bottom: 1px solid #e5e5e5;
        }
      }
      .con_bom {
        position: absolute;
        bottom: 100px;
        left: 50%;
        display: flex;
        transform: translateX(-50%);
        .cc {
          width: 60px;
          margin-top: 8px;
        }
      }
      .aa {
        height: 50px;
      }
    }
  }
  .el-aside {
    width: 232px;
    background-color: #fff;
    margin: 0 16px;
    .t_item {
      margin: 4px auto;
      width: 216px;
      height: 36px;
      line-height: 36px;
      color: #e02020;
      font-size: 14px;
      border-radius: 2px;
      background: rgba(224, 32, 32, 0.1);
      .tet {
        margin-left: 44px;
      }
    }
    .t_item1 {
      margin: 4px auto;
      width: 216px;
      height: 36px;
      line-height: 36px;
      color: rgba(0, 0, 0, 0.6);
      font-size: 14px;
      .tet {
        margin-left: 44px;
      }
    }

    .title {
      display: flex;
      width: 216px;
      height: 36px;
      line-height: 36px;
      margin: 16px 8px 0;
      .ico_1 {
        margin: 10px 8px 0 20px;
        font-size: 15px;
      }
      .ico_2 {
        font-size: 15px;
        margin: 10px 8px 0 80px;
      }
      .tet {
        font-size: 14px;
        color: #e02020;
      }
    }
  }
}

.nav {
  height: 54px;
  line-height: 54px;
  background-color: #fff;
  margin-bottom: 16px;
  .nav_box {
    display: flex;
    align-items: center;
    margin-left: 44px;
    font-size: 16px;
    color: #999999;
    .router-link-active {
      font-size: 16px;
      color: #999999 !important;
      text-decoration: none;
    }
    .el-icon {
      margin: 0 10px 0 10px;
    }
  }
}
// @media (max-width: 1024px) {
//   .main {
//     width: 100%;
//     margin: 0 auto;
//     background-color: #f0f0f0;
//   }
// }
// @media (min-width: 1025px) {
.main {
  width: 1080px;
  margin: 0 auto;
  background-color: #f0f0f0;
}
// }
</style>
